---
name: Input
route: /input
menu: 业务组件
---

import {Playground} from 'docz';
import Input from './index';
import Space from '../Space';

import './input.scss';

## 基本使用

<Playground>
  <div style={{width: "300px"}}>
    <Input placeholder="基本使用"/>
  </div>
</Playground>

## 三种大小

<Playground>
  <Space>
    <Input placeholder="small size" size="sm"/>
    <Input placeholder="default size" size="md" />
    <Input placeholder="large size" size="lg"/>
  </Space>
</Playground>

## 前置/后置标签

<Playground>
  <Space>
    <Input placeholder="example" addonBefore="http://" addonAfter=".com" defaultValue="example"/>
    <br/>
    <Input placeholder="example" addonAfter=".com" defaultValue="example"/>
    <br/>
    <Input placeholder="example" addonBefore="http://" defaultValue="example"/>
  </Space>
</Playground>

## 带移除图标

<Playground>
  <Space>
    <Input placeholder="example" allowClear defaultValue="example"/>
    <br/>
    <Input placeholder="example" allowClear/>
  </Space>
</Playground>